<%@ include file="/common/taglibs.jsp"%>
<c:set var="shoppingCartUrl"><spring:url value="/shoppingCart/shoppingCart.html"/></c:set>
<c:set var="convenientStoreAddressMsg"><spring:message code="orderDetailsInfo.delivery.convenientStoreDeliveryService.address.msg"/></c:set>
<c:set var="convenientStoreAddress"><spring:message code="orderDetailsInfo.delivery.convenientStoreDeliveryService.address.dummy"/></c:set>

<head>
	<title><spring:message code="orderDetailsInfo.header"/></title>
	<script type="text/javascript">
	function selectPaymentType(event) {
		var elRadio = event.target;
		if(elRadio.id == "cashInConvenientStore"){
			$("#postalDeliveryService").hide();
			$("#postalDeliveryServiceLabel").hide();
			$("#convenientStoreDeliveryService").trigger("click");
		} else{
			$("#postalDeliveryService").show();
			$("#postalDeliveryServiceLabel").show();
		}
	}

	$(document).ready(function(){
		//register events
		$("#goToShoppingCart").click(function(){
			location.assign("${shoppingCartUrl}");
		});

		$("#selectAConvenientStore").click(function(){
			alert("${convenientStoreAddressMsg}");
			var input = $("#convenientStoreAddress");
			input.val("${convenientStoreAddress}");
			return false;
		});

		$("#convenientStoreDeliveryService").click(function(){
			$("#convenientStoreAddressFieldset").show();
			$("#recipientAddressLabel").hide();
			$("#recipientAddress").hide();
		});

		$("#postalDeliveryService").click(function(){
			$("#convenientStoreAddressFieldset").hide();
			$("#recipientAddressLabel").show();
			$("#recipientAddress").show();
		});

		$("#paymentTypeFieldset :radio").click(selectPaymentType);

		$("#invoiceType").change(function(){
			var elOption = $("option:selected", this);
			//alert("elOption.val()=" + elOption.val());
			$("#invoiceTitleLabel").show();
			$("#invoiceTitle").show();
			$("#invoiceUniformNumberLabel").show();
			$("#invoiceUniformNumber").show();
			
			if(elOption.val() === "DuplicateInvoice"){
				$("#invoiceUniformNumberLabel").hide();
				$("#invoiceUniformNumber").hide();
			} else if(elOption.val() === "DuplicateInvoiceWithCashier"){
				$("#invoiceTitleLabel").hide();
				$("#invoiceTitle").hide();	
			}

		});

		//initial ui components status
		$("#paymentTypeFieldset :radio:first, #delieveryServiceFieldset :radio:first").trigger('click');
		$("#invoiceType option:first").trigger('change');
	});
	</script>
</head>
<div class="ui-widget summary-booklist">
	<h1 class="ui-helper-reset ui-widget-header ui-corner-top booklist-header">
		<spring:message code="orderDetailsInfo.header"/>
	</h1>
	<div class="ui-widget-content ui-corner-bottom">
		<form:form commandName="orderDto" method="post" action="confirmOrder.html">
		<table width="100%">
			<tr>
				<td colspan="2">
				<fieldset id="paymentTypeFieldset">
				<legend>*<spring:message code="orderDetailsInfo.payment.header" /></legend>
				<table>
					<tr>
						<td><form:radiobutton path="paymentType" id="creditCard" value="CreditCard" /></td>
						<td><label for="creditCard"><spring:message code="orderDetailsInfo.payment.creditCard"/></label></td>
					</tr>
					<tr>
						<td><form:radiobutton path="paymentType" id="cashInConvenientStore" value="CashInConvenientStore"/></td>
						<td><label for="cashInConvenientStore"><spring:message code="orderDetailsInfo.payment.convenientStore"/></label></td>
					</tr>
					<tr>
						<td><form:radiobutton path="paymentType" id="atm" value="Atm"/></td>
						<td><label for="atm"><spring:message code="orderDetailsInfo.payment.atm"/></label></td>
					</tr>
					<tr>
						<td><form:radiobutton path="paymentType" id="postalOrder" value="PostalOrder"/></td>
						<td><label for="postalOrder"><spring:message code="orderDetailsInfo.payment.postalOrder"/></label></td>
					</tr>
					<tr>
						<td colspan="2"><form:errors path="paymentType" cssClass="fieldError"/></td>
					</tr>
				</table>
				</fieldset>
				</td>
			</tr>
			<tr>
				<td colspan="2">
				<fieldset id="delieveryServiceFieldset">
				<legend>*<spring:message code="orderDetailsInfo.delivery.header" /></legend>
				<table>
					<tr>
						<td><form:radiobutton path="deliveryServiceType" id="postalDeliveryService" value="-1"/></td>
						<td><label id="postalDeliveryServiceLabel" for="postalDeliveryService"><spring:message code="orderDetailsInfo.delivery.postalDeliveryService"/></label></td>
					</tr>
					<tr>
						<td><form:radiobutton path="deliveryServiceType" id="convenientStoreDeliveryService" value="-2"/></td>
						<td><label for="convenientStoreDeliveryService"><spring:message code="orderDetailsInfo.delivery.convenientStoreDeliveryService"/></label></td>
					</tr>
					<tr>
						<td colspan="2"><form:errors path="deliveryServiceType" cssClass="fieldError"/></td>
					</tr>
				</table>
				</fieldset>
				</td>
			</tr>
			<tr>
				<td colspan="2">
				<fieldset id="convenientStoreAddressFieldset">
				<legend>*<spring:message code="orderDetailsInfo.delivery.convenientStoreDeliveryService.address" /></legend>
				<table>
					<tr>
						<td><form:input id="convenientStoreAddress" path="convenientStoreAddress"/>
						<form:errors path="convenientStoreAddress" cssClass="fieldError"/></td>
					</tr>
					<tr>
						<td><button class="aButton" id="selectAConvenientStore"><spring:message code="orderDetailsInfo.delivery.convenientStoreDeliveryService.address.select"/></button></td>
					</tr>
				</table>
				</fieldset>
				</td>
			</tr>
			<tr>
				<td colspan="2">
				<fieldset>
				<legend>*<spring:message code="orderDetailsInfo.invoice.header" /></legend>
				<table>
					<tr>
						<td><form:select path="invoiceType" id="invoiceType">
							<form:option id="DuplicateInvoice" value="DuplicateInvoice"><spring:message code="orderDetailsInfo.invoice.duplicateInvoice"/></form:option>
							<form:option id="DuplicateInvoiceWithCashier" value="DuplicateInvoiceWithCashier"><spring:message code="orderDetailsInfo.invoice.duplicateInvoiceWithCashier"/></form:option>
							<form:option id="Invoice" value="Invoice"><spring:message code="orderDetailsInfo.invoice.tripleInvoice"/></form:option>
						</form:select><form:errors path="invoiceType" cssClass="fieldError"/></td>
					</tr>
					<tr>
						<td><label id="invoiceTitleLabel" for="invoiceTitle">*<spring:message code="orderDetailsInfo.invoice.title"/></label></td>
						<td><form:input id="invoiceTitle" path="invoiceTitle"/><form:errors path="invoiceTitle" cssClass="fieldError"/></td>
					</tr>
					<tr>
						<td><label id="invoiceUniformNumberLabel" for="invoiceUniformNumber">*<spring:message code="orderDetailsInfo.invoice.uniformNumber"/></label></td>
						<td><form:input id="invoiceUniformNumber" path="invoiceUniformNumber"/><form:errors path="invoiceUniformNumber" cssClass="fieldError"/></td>
					</tr>
				</table>
				</fieldset>
				</td>
			</tr>
			<tr>
				<td colspan="2">
				<fieldset>
				<legend><spring:message code="orderDetailsInfo.recipient.header" /></legend>
				<table>
					<tr>
						<td><label for="recipientName">*<spring:message code="orderDetailsInfo.recipient.name"/></label></td>
						<td><form:input id="recipientName" path="recipientName"/><form:errors path="recipientName" cssClass="fieldError"/></td>
					</tr>
					
					<tr>
						<td><label for="recipientCellPhoneNumber">*<spring:message code="orderDetailsInfo.recipient.cellPhoneNumber"/></label></td>
						<td><form:input id="recipientCellPhoneNumber" path="recipientCellPhoneNumber"/><form:errors path="recipientCellPhoneNumber" cssClass="fieldError"/></td>
					</tr>
					
					<tr>
						<td><label id="recipientAddressLabel" for="recipientAddress">*<spring:message code="orderDetailsInfo.recipient.address"/></label></td>
						<td><form:input id="recipientAddress" path="recipientAddress"/><form:errors path="recipientAddress" cssClass="fieldError"/></td>
					</tr>
					
					<tr>
						<td><label for="recipientExtraRequirements"><spring:message code="orderDetailsInfo.recipient.extraRequirements"/></label></td>
						<td><textarea name="recipientExtraRequirements" rows="4" cols="25"></textarea></td>
					</tr>
				</table>
				</fieldset>
				</td>
			</tr>
			<tr>
				<td><button id="goToShoppingCart" class="aButton" type="button" style="float: left; margin-left: 10px;"><spring:message code="orderDetailsInfo.goToShoppingCart"/></button></td>
				<td><button id="confirmOrder" class="aButton" type="submit" style="float: right; margin-right: 10px;"><spring:message code="orderDetailsInfo.confirmOrder"/></button></td>
			</tr>
		</table>
		</form:form>
	</div>
</div>